<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			h1:hover{
				color: #ffff00;
				background: #ff0000; ;
			}
			/**
			 * 伪类选择器  ：link   链接未被点击时状态
			 *            ：active  链接被点击时状态
			 *            :visited  链接点击后状态
			 *            :hover   悬停时状态
			 * 主要结合在一起，针对a元素
			 */
			a:link{
				color: #ffaa7f;
				/*去掉超链接*/
				text-decoration: none;
			}
			a:active{
				color: #0055ff;
				background: #00aa00;
			}
			a:visited{
				color: #aaaaff;
				background: #aaaa7f;
			}
			a:hover{
				font-size: 36px;
			}
			/**
			 * 
			 */
			li:first-child{
				background: #ffff7f;
				color: #aa55ff;
			}
			li:last-child{
				background: #ffaaff;
				color: #ff007f;
			}
			li:nth-child(2){
				background: #aaaa00;
				color: #ff5500;
			}
			li:nth-child(3){
				background: #19b1c8;
				color: #c6c829;
			}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>